<template>
  <div>
    <!-- 登录授权弹框 -->
    <div v-if="showLogin">
      <!-- 封装的组件 -->
      <!-- arguments为从子组件传递过来的两个信息 -->
      <LoginWindow @changeShow="getModel(arguments)"></LoginWindow>
    </div>

  
      
<!--      @scrolltolower='loadMoreImages'-->
      <div class='main' scroll-y='true' 
      @scrolltolower='loadMoreImages'>
        
        <!-- 轮播图 -->
        <SwiperIndex  
       
        :key='index' 
       :index_src = 'index_src'  >
          <!-- <span slot="span">123</span> -->
          
          </SwiperIndex>
       
    <!-- <div class="box_search">
      <input @confirm="handleSearch" confirm-type="搜索" v-model="searchContent" type="text" placeholder="点击搜索"  placeholder-class="placeholder">
       
       <div class="search" @click="handleSearch"  @confirm="handleSearch">搜索</div>
    </div> -->
 </div>
    <div id="searchContainer">
    <div class="searchHeader">
        <input @confirm="handleSearch"  confirm-type="搜索" v-model="searchContent" type="text" placeholder="点击搜索"  placeholder-class="placeholder">
      
        <span @click="searchContent=''" class="clear" v-show="searchContent">x</span>
         <img class="img_search" src="https://my-wechatl.oss-cn-beijing.aliyuncs.com/shousuo.png">
       
    </div>
    <!-- <IndexList/> -->
  </div>

    <IndexList 
       :key='index' v-for='(strategy,index) in strategy' 
       :strategy = 'strategy' >
    </IndexList>
        

     
  </div>
</template>

<script>
// js代码
//登录授权框
import {get} from '@/utli'
import LoginWindow from "@/components/LoginWindow";
import SwiperIndex from '@/components/SwiperIndex';
import IndexList from '../../components/IndexList.vue'

// import LoginWindow from "@/components/LoginWindow";
export default {
  components: {
    LoginWindow,
    SwiperIndex,
    IndexList,
    
  },

    props: ['strategy','index_src' ],

  data(){
    return{  
    userinfo:{},
    showLogin:false,
    strategy:[],
    index_src:[],
    searchContent:'',
  }
},


  // methods自己定义的函数?
  methods: {

    handleSearch(e){
                const search = e.mp.detail.value
            //    this.historyKeyword = this.historyKeyword.unshift(this.searchContent)
    // 添加到本地缓存
    wx.setStorageSync('search', search)
     console.log("搜索框serach内容为"+search)
wx.reLaunch({
        // 绝对路径前要加 /
        url: "/pages/Search/main",
      });
      
                },

    //收藏页面
    async getall () {
    //调用后台数据时显示「加载中」提示框
    wx.showToast({
      title: '加载中',
      icon: 'loading'
    })

//     const a='1,2'
//  a.split(',')
//  console.log("数组",a[0])
 
    //需要传到后台的数据
    const data = {
      openid: this.userinfo.openId,
    }
    //将后台传过来的数据保存到collect变量中
    const strategy = await get('/weapp/getall', data)
    this.strategy = strategy.strategy
    console.log("从后台返回的记录数据：",this.strategy)
    const index_src = await get('/weapp/getindex_src', data)
    this.index_src = index_src.index_src
    console.log("从后台返回的记录数据轮播图：",this.index_src)
    
    //通过collect数组的长度来判断show_collect变量为false或者true
    if(this.strategy.length === 0){
      this.show_strategy = true
    }else{
      this.show_strategy = false
    }
    wx.hideToast()
  },


getModel(val) {
      this.showLogin = val[0];
      this.userinfo = val[1];
    },
shousuo(){

       console.log("提交成功搜索")
     
       
        }

     },


//授权
//开启页面既执行
  onShow() {
    const userinfo = wx.getStorageSync("userinfo");
    if (userinfo.openId) {
      this.userinfo = userinfo;
      console.log("用户信息：", this.userinfo);
    } else {
      wx.hideTabBar();
      //显示授权悬浮窗
      this.showLogin = true;
    }
     this. getall()
   
     
    //  this.getindex()
  },
//  onLoad(){

//  }
 onLoad: function (option) {
    Object.assign(this, this.$options.data()); // 重置页面数据
  }
};
</script>

<style lang="scss">


  .main{
    width: 100%;
    height: 100%;

//搜索框
  .box_search {
  width: 300px;
  height: 50px;
  margin: 10px ;
  margin-left: 50px;
  font-size: 14px;
  border:solid 1px red;
}
.search {
  width: 80px;
  height: 30px;
  float: left;
  background: black;
  color: white;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}

//搜索的模块位置
input {
  width: 150px;
  border: 1px solid #e2e2e2;
  height: 30px;
  float: left;
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: 5px center;
  padding: 0 0 0 20px;
}
  }

.searchHeader{
        width: 80%;
        height: 80rpx;
        margin: auto;
        margin-top:20px ;
        border:5rpx solid   #dedede;
        position: relative;
        input{
            height: 100%;
            width: 260px;
            margin-left:40px ;
            // border:1px solid red;
            .placeholder{
                // color:#f4ea2a ;
                text-align: center;
                font-size: 35rpx;
            }
        }
         .clear{
        position: absolute;
        right: 20rpx;
        top: 10rpx;
        z-index: 99;
    }
    .img_search{
      top: 10rpx;
      position: absolute;
      height: 30px;
      width: 30px;
    }
    }

    

</style>
